import 'package:aero_frisbee/app/conf/local_resource.dart';
import 'package:aero_frisbee/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AfInputContentEmojiView extends ConsumerStatefulWidget {
  const AfInputContentEmojiView({
    super.key,
    this.onEmojiSelected,
    this.onEmojiDelete,
  });
  final ValueChanged<String>? onEmojiSelected;
  final Function()? onEmojiDelete;
  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _AfInputContentEmojiViewState();
}

class _AfInputContentEmojiViewState
    extends ConsumerState<AfInputContentEmojiView> {
  static const int _pageSize = 27;

  @override
  Widget build(BuildContext context) {
    List<Widget> pages = [];
    int size = (LocalResource.emojisList.length / _pageSize).ceil();
    for (int i = 0; i < size; ++i) {
      int start = i * _pageSize;
      int end = start + _pageSize > LocalResource.emojisList.length
          ? LocalResource.emojisList.length
          : start + _pageSize;
      pages.add(AfBottomEmojiContentView(
        start: start,
        end: end,
        onEmojiDelete: widget.onEmojiDelete,
        emojiTap: widget.onEmojiSelected,
      ));
    }
    return SizedBox(
      height: 197,
      child: PageView(
        allowImplicitScrolling: true,
        children: pages,
      ),
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void didUpdateWidget(AfInputContentEmojiView oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

class AfBottomEmojiContentView extends StatelessWidget {
  final int start;
  final int end;
  final ValueChanged<String>? emojiTap;
  final Function()? onEmojiDelete;
  const AfBottomEmojiContentView(
      {Key? key,
      required this.start,
      this.onEmojiDelete,
      this.emojiTap,
      required this.end})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.fromLTRB(10, 12, 10, 0),
      child: LayoutBuilder(
        builder: (context, constraints) {
          var w = constraints.maxWidth / 7;
          var h = constraints.maxHeight / 4;
          return GridView.count(
            crossAxisCount: 7,
            childAspectRatio: w / h,
            physics: const NeverScrollableScrollPhysics(),
            children: [
              ...LocalResource.emojisList.sublist(start, end).map((e) {
                return InkWell(
                  onTap: () {
                    emojiTap?.call(e);
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.transparent,
                      ),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      e,
                      style: const TextStyle(
                        fontWeight: FontWeight.normal,
                        fontSize: 20,
                      ),
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                  ),
                );
              }).toList(),
              ...[
                GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: onEmojiDelete,
                  child: Container(
                    height: 30,
                    width: 30,
                    alignment: Alignment.center,
                    child: Assets.images.chat.delEmoji.image(width: 20),
                  ),
                )
              ]
            ],
          );
        },
      ),
    );
  }
}
